<template>
  <div>
    <formSearch :opts="opts" />
    <el-button @click="dialogFormVisible = true">新增</el-button>
    <el-button @click="upload"></el-button>
    <el-dialog @open="getOpen" @close="close" title="测试新增" :close-on-click-modal="false" :visible.sync="dialogFormVisible" width="40%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" prop="region">
          <label slot="label"><i style="color: red">*&nbsp; </i> 性别</label>
          <el-select v-model="form.region" placeholder="请选择性别">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="Add">确 定</el-button>
      </div>
    </el-dialog>
    <div>
      <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
        {{ tag }}
      </el-tag>
      <div class="list">
        <el-input @input="onchange" class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm"> </el-input>
        <!-- @blur="handleInputConfirm" -->
        <tags v-if="inputVisible" ref="tags" class="tags_value" @addItem="addItem" />
        <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加标签</el-button>
      </div>
    </div>
    <LabelTag />
  </div>
</template>
<script>
import { upload } from 'db-file'
import formSearch from 'db-formsearch'
import * as tool from './index.js'
export default {
  components: {
    formSearch
  },
  data() {
    return {
      opts: [
        {
          label: '姓名',
          val: '',
          key: 'name',
          type: 'input'
        },
        {
          label: '日期',
          val: '',
          key: 'startime',
          key2: 'end',
          type: 'daterange'
        }
      ],
      formLabelWidth: '120px',
      dialogFormVisible: false,
      form: {
        name: '',
        region: ''
      },
      rules: {
        name: [
          {
            required: true,
            pattern: /^[a-zA-Z0-9]+$/,
            message: '只能输入数字或大小写字母',
            trigger: 'blur'
          }
        ],
        region: [{ validator: this.validatorRegion, trigger: 'change' }]
      }
    }
  },
  async created() {
    console.log(tool)
    const data = await this.$http.get('/h/v1/home/projectStructure?streetId=-1')
    console.log(data, '???')
  },
  methods: {
    // 自定义校验方法
    validatorRegion(rule, value, callback) {
      if (!this.form.region) {
        callback(new Error('请选择性别'))
      } else {
        callback()
      }
    },
    Add() {
      this.$refs.form.validate((valid) => {
        console.log(valid)
        if (valid) {
          this.$message.success('校验成功')
          this.dialogFormVisible = !this.dialogFormVisible
        } else {
          this.$message.warning('校验失败')
        }
      })
    },
    // 弹框打开的时
    getOpen() {
      // 移除校验状态
      // this.$refs.form.resetField()
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    // 关闭弹窗
    close() {
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
    },
    // upload() {
    //   // upload(this.file)
    //   // console.log(this.file())

    //   // function file(e) {
    //   //   console.log(e)
    //   // }
    // },
    async upload(key) {
      const that = this
      const input = document.getElementById('file_btn')
      input.removeEventListener('change', (e) => console.log('a'))
      input.click()
      input.addEventListener('change', callbacks, false)
      input?.removeEventListener('change', () => console.log('a'))
      const v = input.outerHTML
      input.outerHTML = v
      async function callbacks(e) {
        // const data = await callback(e)
        // console.log(data)
        console.log(e, '???')
        // that.filesList[key].push(data[0])
      }
    },
    file(e) {
      console.log(e)
    }
  }
}
</script>
<style lang="less" scoped></style>
